<template>
  <el-form>
    <!-- 单选部分 -->
    <!-- 弄个单选框组试试 -->
    <el-radio-group v-model="radio" v-if="isdanxuan">
      <el-form-item v-for="(item, index) in oPtions" :key="index">
        <div class="kuang">
          <el-radio
          :label="item.code"
          class="radio"
        >
          <span>{{ item.code }}:</span>
          <el-input v-model="item.title" class="ipt" ></el-input>
           <!-- 图片 -->
        </el-radio>
        </div >
 <upload class="upload" :index="index" @imgUrl='imgUrl' :picurl='item.img'></upload>
      </el-form-item>
    </el-radio-group>

    <!-- //复选框组 -->
    <el-checkbox-group v-model="checkList" v-else>
      <el-form-item v-for="(item, index) in oPtions" :key="index">
        <!-- 复选部分 -->
         <div class="kuang">
        <el-checkbox :label="item.code" >
          <span>{{ item.code }}:</span>
          <el-input class="ipt" v-model="item.title"></el-input>
        </el-checkbox>
         </div>
         <!-- 图片 -->
         <upload class="upload" :index="index" @imgUrl='imgUrl' :picurl='item.img'></upload>
      </el-form-item>
    </el-checkbox-group>
    <!-- 按钮 -->
    <el-form-item>
      <el-button type="danger" :disabled="isDisabled" @click="addFn"
        >+增加选项与答案</el-button
      >
    </el-form-item>
  </el-form>
</template>

<script>
import upload from '@/zujian/upload'
export default {
  name: 'xuanzekuang',
  props: {
    isDisabled: {
      // 父组件传来的判断是否禁用按钮
      type: [String, Number, Boolean],
      default: true
    },
    isdanxuan: {
      // 父组件传来的判断是否是简答
      type: [String, Number, Boolean],
      default: true
    },
    oPtions: {
      type: Array,
      default: () => [
        { isRight: false, code: 'A', title: '', img: '' },
        { isRight: false, code: 'B', title: '', img: '' },
        { isRight: false, code: 'C', title: '', img: '' },
        { isRight: false, code: 'D', title: '', img: '' }
      ]
    }
  },
  components: {
    upload
  },
  created () {
    // console.log(this.isdanxuan)
    // 子传父
    this.emitOption()
  },
  watch: {
    //   // oPtions (newval, oldval) {
    //   //   this.oPtions = newval
    //   // },

    // 监听是否是单选
    isdanxuan (newval, old) {
      if (newval === true) {
        this.radio = ''
        // this.$emit('changedanxuan', this.checkList)
        this.checkList = []

        // this.oPtions.forEach(item => {
        //   item.isRight = false
        // })
      }
    },
    //   // 监听code的值是否变化 单选部分
    radio (newVal, oldVal) {
      if (this.isdanxuan !== false) {
        this.oPtions.forEach((item) => {
          // 让选中的对应的那个按钮对应isRight为true
          if (item.code === newVal) {
            item.isRight = true
          } else {
            item.isRight = false
          }
        })
      }
    },
    checkList (newVal, old) {
      // 循环大的那个复选框获取的数据
      this.oPtions.forEach((item) => {
        // 循环遍历复选框的数组，若有则让对应按钮的isRight变为true
        if (this.checkList.includes(item.code)) {
          item.isRight = true
        } else {
          item.isRight = false
        }
      })
      // console.log(newVal)
    }
  },
  data () {
    return {
      radio: '', // 选项里的单选框的值ABCD
      // xuanzeList: [{ 1: 'A' }, { 2: 'B' }, { 3: 'C' }, { 4: 'D' }], // 选择框组件根据这个渲染
      i: 68, // 做添加按钮ABCD枚举用 ASCII码对应的D是68
      ii: 4, // 做addFn里的数组对象的key
      checkList: [], // 这个是复选框组收集到的数据 内容是数组对象
      inputVal: {} // 选项输入框绑定的值,目前还没用
      // option: [
      //   { isRight: false, code: 'A', title: '', img: '' },
      //   { isRight: false, code: 'B', title: '', img: '' },
      //   { isRight: false, code: 'C', title: '', img: '' },
      //   { isRight: false, code: 'D', title: '', img: '' }
      // ]
    }
  },
  methods: {
    // 图片赋值
    imgUrl (imgurl, index) {
      this.oPtions[index].img = imgurl
    },

    // 选择框的选中按钮
    choice (data) {
      console.log(data)

      // 如果是单选
      if (data.questionType === '1') {
        data.options.forEach((item) => {
          console.log(2)
          if (item.isRight === 1) {
            this.radio = item.code
          }
        })
      }
      if (data.questionType === '2') {
        // 如果是多选
        data.options.forEach((item) => {
          if (item.isRight === 1) {
            console.log(1)
            this.checkList.push(item.code)
            console.log(this.checkList)
          }
        })
      }
    },

    // 子传父
    emitOption () {
      this.$emit('emitOption', this.oPtions)
    },

    // 点击添加选项按钮（多选那的）
    addFn () {
      // console.log(this.i)
      this.i = this.i + 1
      const num = this.i
      this.zm = String.fromCharCode(num) // 转换ascii码 数字对应字母
      this.ii = this.ii + 1
      const obj = {}
      obj[`${this.ii}`] = this.zm
      // this.xuanzeList.push(obj)
      // 点击后向option数组里push一个元素
      this.oPtions.push({
        isRight: 'false',
        code: this.zm,
        title: '',
        img: ''
      })
    }

  }
}
</script>

<style scoped>
.upload{
  display: inline-block;
    /* float:right; */
}
.kuang{
  margin-bottom: 10px;
  display: inline-block;
}
.el-input {
  width: 300px;
  margin-right: -10px;
}
.el-input,
.el-checkbox {
  margin-bottom: 10px;
}
</style>
